<template>
  <div class="dashboard">
    <header class="header">
      作品后台管理系统
    </header>
    <div class="content">
      <MenuNav :menus="menus" :routeName="routeName" @menu-click="goPage" />
      <MenuContent :title="title">
        <transition name="slide-rtl" mode="out-in" appear>
          <router-view :key="routeName"></router-view>
        </transition>
      </MenuContent>
    </div>
  </div>
</template>
<script setup>
import { reactive, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import MenuNav from '../components/MenuNav.vue'
import MenuContent from '../components/MenuContent.vue'

const router = useRouter();
const menus = reactive([
  { name: '作品管理', pathName: 'Product' },
  { name: '技术栈管理', pathName: 'Techstack' },
  { name: '项目分类', pathName: 'Categories' },
  { name: '平台类型', pathName: 'Platform' }
])
function goPage({ pathName }) {
  router.push({ name: pathName });
}
const routeName = computed(() => {
  return useRoute().name;
});
const title = computed(() => {
  return useRoute().meta.title || '作品后台管理系统';
});
</script>
<style scoped lang="scss">
.dashboard {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.header {
  height: 50px;
  line-height: 50px;
  background: #096dd9;
  padding-left: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.content {
  flex: 1;
  display: flex;
}

// 渐入渐出动画
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}

// 从右往左移动动画
.slide-rtl-enter-active, .slide-rtl-leave-active {
  transition: all 0.3s cubic-bezier(.55,0,.1,1);
}
.slide-rtl-enter-from {
  opacity: 0;
  transform: translateX(100px);
}
.slide-rtl-enter-to {
  opacity: 1;
  transform: translateX(0);
}
.slide-rtl-leave-from {
  opacity: 1;
  transform: translateX(0);
}
.slide-rtl-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.menu-content {
  flex: 1;
  overflow: hidden;
}
</style>
